@holaluz/margarita

Margarita

Margarita is the UI Library from Holaluz.

Check out component examples.

WARNING: While Margarita is open source, its purpose is to improve code quality, consistency, and cross-team collaboration at Holaluz. Thus, it’s likely that we will introduce breaking API changes more often than usual.

About Margarita

• Built on top of @vue/cli.
• Uses Storybook to develop, showcase, and test each component.
• Unit testing based on Jest and Vue Testing Library.

Installing Margarita in another project

The NPM package is available here.

You can install Margarita as a dependency by running the following command in your Vue project:

$ npm install -D @holaluz/margarita

And then, use it as a plugin:

import Vue from 'vue'
import Margarita from '@holaluz/margarita'

Vue.use(Margarita)

Installing in Nuxt

First, install @nuxtjs/style-resources:

npm install @nuxtjs/style-resources

Then, create a plugin for Margarita:

// plugins/margarita.js

import Vue from 'vue'
import Margarita from '@holaluz/margarita'
import '@holaluz/margarita/dist/margarita.css'

Vue.use(Margarita)

And finally, add the following config on the Nuxt Config file:

// nuxt.config.js

export default {
  // Install the plugin
  plugins: [
    './plugins/margarita.js',
  ],

  // Register style-resources module
  modules: ['@nuxtjs/style-resources'],

  // Add Margarita tokens to each SFC style block
  styleResources: {
    scss: ['@holaluz/margarita/dist/scss/_margarita-tokens.scss'],
  },
}

Installing Margarita locally

Clone the repo and install node dependencies:

$ npm install

Then you can run several commands such as

# run storybook locally
$ npm start

# run unit tests
$ npm test

# run unit tests with watch mode enabled
$ npm run test:watch

Deployment and versioning

Margarita uses Semantic Release to handle the release pipeline.

Triggering a new release will create the associated Git tag, the GitHub release entry, and publish a new version on npm.

In order to trigger a new version, make sure you add the appropriate prefix and message to the squashed commit. It is based on the Angular Commit Message Conventions. In short:

# Creates a patch release (v1.0.0 -> v1.0.1)
> fix: commit message

# Creates a feature release (v1.0.0 -> v1.1.0)
> feat: commit message

# Creates a breaking release (v1.0.0 -> v2.0.0)
> fix: commit message
>
> BREAKING CHANGE: explain the breaking change # "BREAKING CHANGE:" is what triggers the breaking release

There's no need to overcomplicate things here. Keep it simple: fix, feat, and chore (plus BREAKING CHANGE) should be enough for now.

FAQ

How can I use Margarita as a dependency in a local project?

More often than not we'd want to work on a consumer while tweaking Magarita.

The best way to do so is by installing Margarita as a local dependency. Check out the instructions in Local Installation.

How can I contribute to documentation?

Follow the edition guidelines here